<template>
	<view class="shop-detail">
		<image :src="img_url + currentData.images" mode="widthFix">
		</image>
		<view class="detail">
			<view class="name">{{ currentData.name }}</view>
			<view class="des">¥{{ currentData.price }}/{{ currentData.sub_name }}</view>
			<view class="rule">
				<text class="rule-title">游戏机制</text>
				<text class="rule-item">{{ currentData.content }}</text>
			</view>
		</view>
		<view class="buy">
			<button class="black-btn" @click="openBuy()">立即购买</button>
		</view>
	</view>
</template>

<script>
import {
	mapState,
	mapActions
} from 'vuex';
import { img_url } from '../../request/index';
export default {
	data() {
		return {
			shopId: null,
			img_url
		}
	},
	computed: {
		...mapState({
			shopList: state => state.shop.shopList // 确保这里引用正确
		}),
		currentData() {
			return this.shopList.filter(item => item.id == this.shopId)[0];
		}
	},
	onLoad(options) {
		this.getShopList();
		if (options?.shopId) this.shopId = +options.shopId;
	},
	methods: {
		...mapActions(['getShopList',]),
		openBuy() {
			let that = this;
			console.log('openBuy', this.currentData);
			// 通过用户openid和订单号生成预支付交易会话标识prepay_id,获取支付参数，请求支付api
			this.$http.openBuy({
				goods_id: this.currentData.id
			}).then(data => {
				wx.requestPayment({
					timeStamp: data.timeStamp,
					nonceStr: data.nonceStr,
					package: data.package,
					signType: data.signType,
					paySign: data.paySign,
					success: function () {
						that.$http.getPayRes({
							out_trade_no: data.out_trade_no
						}).then(() => {
							// 支付成功-跳转订单列表
							uni.navigateTo({
								url: '/packageA/order/order'
							});
						})
					},
					fail: function (res) {
						// 支付失败
						console.error(res)
					}
				});
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.shop-detail {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100vw;
	height: 100vh;
	overflow: hidden;

	>image {
		width: 100%;
		min-width: 400px;
		min-height: 400px;
		height: auto;
	}

	.detail {
		width: 100%;
		max-height: calc(100% - 82px);
		overflow-y: auto;
		padding: 41px 18px 82px 18px;

		.name {
			font-size: 18px;
			font-weight: 600;
			letter-spacing: 1px;
			margin-bottom: 23px;
		}

		.des {
			display: block;
			margin-bottom: 23px;
			font-size: 16px;
		}

		.rule {
			position: relative;
			padding: 20px 0;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;

			&::before {
				content: '';
				width: calc(100% - 36px);
				height: 1px;
				background: $tip2-color;
				position: absolute;
				top: 0;
				opacity: 0.5;
			}

			.rule-title {
				font-size: 16px;
				color: #1F1F1F;
				margin: 23px 0;
				font-weight: 600;
			}

			.rule-item {
				font-size: 12px;
				line-height: 20px;
				color: $tip-color;
			}
		}
	}

	.buy {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 10px 0 30px 0;
		background: #fff;
		box-shadow: 0 0 5px 0 rgba(75, 75, 75, 0.2);
	}
}
</style>
